<template>
  <div id="my-information">
    <el-card>
      <el-form label-width="80px" style="width: 300px">
        <el-form-item label="头像">
          <el-avatar v-if="avatarShow" :src="userInfo.avatar"></el-avatar>
          <el-avatar v-if="!avatarShow">{{userInfo.name}}</el-avatar>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input readonly v-model="userInfo.loginName"/>
        </el-form-item>
        <el-form-item label="真实姓名">
          <el-input readonly v-model="userInfo.name"/>
        </el-form-item>
        <el-form-item label="用户编号">
          <el-input readonly v-model="userInfo.code"/>
        </el-form-item>
        <el-form-item label="归属公司">
          <el-input readonly v-model="userInfo.company"/>
        </el-form-item>
        <el-form-item label="归属部门">
          <el-input readonly v-model="userInfo.office"/>
        </el-form-item>
        <el-form-item label="角色">
          <el-input readonly v-model="userInfo.role"/>
        </el-form-item>
        <el-form-item label="办公电话">
          <el-input readonly v-model="userInfo.phone"/>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input readonly v-model="userInfo.mobile"/>
        </el-form-item>
        <el-form-item label="登录IP">
          <el-input readonly v-model="userInfo.loginIp"/>
        </el-form-item>
      </el-form>
    </el-card>

  </div>
</template>

<script>
  import {mapState} from 'vuex'

  export default {
    computed: {
      ...mapState({
        userInfo: state => state.manager.userInfo
      })
    },
    name: "my-information",
    data(){
      return {
        avatarShow:false
      }
    },
    mounted(){
      if (this.common.isEmpty(this.userInfo.avatar)){
        this.avatarShow = false
      } else{
        this.avatarShow = true
      }
    },
    watch:{
      'userInfo.avatar'(val){
        if (this.common.isEmpty(val)){
          this.avatarShow = false
        } else{
          this.avatarShow = true
        }
      }
    }
  }
</script>

<style scoped>

</style>
